import styles from './index.less'
import React, { useState, useEffect } from 'react'
import { getMvDetail, getMvUrl } from '@/api'
import MyImg from '@/components/myimg'
const MvPage: React.FC = () => {
    const [mvDetail, setMvDetail] = useState<any>(null)
    const [mvUrl, setMvUrl] = useState<string>('')
    useEffect(() => {
        let id = Number.parseInt(window.location.toString().replace(/^.*id=/, ''))
        if (id) {
            getMvDetail({ mvid: id }).then(data => {
                if (data?.data) {
                    setMvDetail(data.data)
                    console.log(data.data)
                }
            })
            getMvUrl({ id: id }).then(data => {
                if (data?.data?.url) {
                    setMvUrl(data?.data?.url)
                    console.log(data?.data?.url)
                }
            })
        }
    }, [])
    return (
        <div className={styles['mvpage']}>
            <div className={styles['mvpage-left']}>
                <div className={styles['topline']}>
                    <span>
                        Mv详情
                    </span>
                </div>
                <video
                    src={mvUrl}
                    className={styles['mv-video']}
                    controls={true}
                    autoPlay={true}
                    onErrorCapture={(err)=>{console.log(err)}}
                    onProgress={(event)=>console.log('progress',event)}
                    onCanPlay={(event)=>console.log('canplay',event)}
                    onClick={event=>{
                        console.log('click',event)
                        console.log(Object.keys(event))
                    }}
                >
                    您的浏览器不支持播放此视频
                </video>
                <div className={styles['artist-info']}>
                    <MyImg
                        src={mvDetail?.artists[0]?.img1v1Url
                            || mvDetail?.cover}
                        imgSize={{ width: 40 }}
                        loading={'lazy'}
                        className={styles['artist-cover']}
                    />
                    <span
                    className={styles['artist-name']}
                    >
                        {mvDetail?.artistName || ''}
                    </span>
                </div>
                <div className={styles['mv-info']}>
                    <div className={styles['mv-name']}>
                        {mvDetail?.name || ''}
                    </div>
                    <div className={styles['mv-playinfo']}>
                        <span>
                            发布:{mvDetail?.publishTime || ''}
                        </span>
                        <span>
                            播放:{mvDetail?.playCount || 0}次
                        </span>
                    </div>
                </div>
            </div>
            <div className={styles['mvpage-right']}>
                <div className={styles['topline']}>
                    <span>
                        相关推荐
                    </span>
                </div>
            </div>
        </div>
    )
}
export default MvPage